<template>
  <div id="">
    <headerbox :headerTitle="'提现记录'" :hasBack='true'></headerbox>
    <div class="bgWhite allWithdraw">
      累计提现成功（元）
      <h1 v-if="drawList.data.length==0">0.00</h1>
      <h1 v-else>{{(drawList.totalAmount).toFixed(2)}}</h1>
    </div>
    <noneList :noneTxt="'还没有提现记录'" v-if="drawList.data.length==0"></noneList>
    <ul class="withdrawlist" v-else>
      <li v-for="elem in drawList.data" :key="elem.key">
        <div class="">
          <span>{{drawStatus(elem.status)}}</span>
          <p>{{setTimeDate(elem.applyTime)}}</p>
        </div>
        <h2>{{(elem.amount).toFixed(2)}}</h2>
      </li>
    </ul>
  </div>
</template>
<script>
import {userDrawList} from '@/utils/ajaxRequest.js';
import {dateChangeTime} from '@/utils/util.js';
export default {
  name: "",
  data: () => ({
    drawList:{
      data:[],
      totalAmount:0,
    },
  }),
  components: {
    noneList:()=>import('@/components/noneList/noneList'),
  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    userDrawList({token:xlyd_loginInfo.token}).then(res=>{
      console.log(res);
      if(res) {
        self.drawList = res.data.result;
      }
    })
  },
  methods: {
    // 区分状态显示
    drawStatus(status) {      //0:待审核；1：已审核（提现成功）；2：已拒绝
      switch (status) {
        case 0:
          return "待审核";
          break;
        case 1:
          return "提现成功";
          break;
        case 2:
          return "审核失败";
          break;
        default:

      }
    },
    // 设置日期格式
    setTimeDate(timer) {
      return dateChangeTime(timer);
    }
  }
}
</script>
<style lang="scss" scoped>
.allWithdraw{
  padding: 20px 10px;
  margin-bottom: 10px;
  h1{
    color: $redColor;
    margin-top: 20px;
  }
}
.withdrawlist{
  background: white;
  padding: 0 10px;
  li{
    @include flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid $boxBgcolor;
    div{
      p{
        color: $lightColor;
        margin-top: 10px;
      }
    }
    h2{
      color: $redColor;
    }
  }
}
</style>
